<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数据大屏</title>
    <link rel="stylesheet" href="css/layui.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/lc_switch.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo "><img src="images/logo.png" alt=""></div>
        <!-- 头部区域（可配合layui已有的水平导航） -->

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="images/help.png" class="layui-nav-img">帮助
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="images/user2.png" class="layui-nav-img us">昵称
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="./images/out.png" class="layui-nav-img">
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-tab">
        <div class="layui-side layui-bg-black ">
            <div class="layui-side-scroll">
                <div class="look">
                    <img src="images/big.png" class="work work-look1">
                    <img src="images/big.png" class="work work-look2">
                </div>
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree layui-tab-title left_tab" lay-filter="test">
                    <li class="layui-nav-item num layui-this">
                        <img src="images/work.png" class="work">工作台
                    </li>
                    <li class="layui-nav-item num">
                        <img src="images/num.png" class="work">数据管理
                    </li>
                </ul>
            </div>
        </div>

        <div class="layui-body layui-tab-content Num" style="background-color: #fff">
            <!-- 内容主体区域 -->

            <div class="layui-tab-item layui-show">
                <div class="layui-tab layui-tab-brief lTop" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">数据大屏</li>
                        <li>移动文档</li>
                        <li>动态演示</li>
                        <li>动态门户</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="SJ-top">
                                <div class="SJT-left">
                                    <div>已创建<span>1</span>个/还可以创建 <span>x</span>个</div>
                                    <button type="button" class="btn tab-button">
                                        <i class="layui-icon">&#xe654;</i> 创建组
                                    </button>
                                </div>
                                <div class="SJT-right">
                                    <button type="button" class="btn">
                                        <i class="iconfont">&#xe637;</i> 导出大屏
                                    </button>
                                    <button type="button" class="btn">
                                        <i class="iconfont" style="font-size: 0.3rem">&#xe6e0;</i> 导入大屏
                                    </button>
                                    <div class="SJT-ss">
                                        <input type="text" class="suos" placeholder="请输入关键字">
                                        <i class="iconfont ic">&#xe618;</i>
                                    </div>

                                </div>
                            </div>
                            <div class="SJ-bottom">
                                <ul class="SJB-ul">
                                    <li class="SJB_li">
                                        <div class="icon">
                                            <i class="iconfont">&#xe602;</i>
                                        </div>
                                        <p class="cuj">创建大屏</p>
                                    </li>
                                    <li class="SJB_li">
                                        <a href="tuceng.html">
                                            <div class="SJBL-top"></div>
                                            <div class="SJBL-bottom">
                                                <div>
                                                    <div class="enjoy">共享文件夹</div>
                                                    <span>2020.8.4</span>
                                                    <span>14:58</span>
                                                </div>

                                            </div>
                                        </a>
                                    </li>
                                    <li class="SJB_li">
                                        <div class="SJBL-top"></div>
                                        <div class="SJBL-bottom">
                                            <div class="SJBL_left">
                                                <div class="enjoy">名称</div>
                                                <span>2020.8.4</span>
                                                <span>14:58</span>
                                            </div>
                                            <div class="SJBL_right">
                                                <input type="checkbox" name="check-1" value="4" class="lcs_check"
                                                       autocomplete="off"/>
                                                <p>未发布</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="SJ-top">
                                <div class="SJT-left">
                                    <div>已创建<span>1</span>个/还可以创建 <span>x</span>个</div>
                                    <button type="button" class="btn tab-button">
                                        <i class="layui-icon">&#xe654;</i> 创建组
                                    </button>
                                </div>
                                <div class="SJT-right">
                                    <button type="button" class="btn">
                                        <i class="iconfont">&#xe637;</i> 导出大屏
                                    </button>
                                    <button type="button" class="btn">
                                        <i class="iconfont" style="font-size: 0.3rem">&#xe6e0;</i> 导入大屏
                                    </button>
                                    <div class="SJT-ss">
                                        <input type="text" class="suos" id="" placeholder="请输入关键字">
                                        <i class="iconfont ic">&#xe618;</i>
                                    </div>

                                </div>
                            </div>
                            <div class="SJ-bottom">
                                <ul class="SJB-ul">
                                    <li class="SJB_li">
                                        <div class="icon">
                                            <i class="iconfont">&#xe602;</i>
                                        </div>
                                        <p class="cuj">创建大屏</p>
                                    </li>
                                    <li class="SJB_li">
                                        <div class="SJBL-top"></div>
                                        <div class="SJBL-bottom">
                                            <div class="SJBL_left">
                                                <div class="enjoy">名称</div>
                                                <span>2020.8.4</span>
                                                <span>14:58</span>
                                            </div>
                                            <div class="SJBL_right">
                                                <input type="checkbox" name="check-1" value="4" class="lcs_check"
                                                       autocomplete="off"/>
                                                <p>未发布</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="SJ-top">
                                <div class="SJT-left">
                                    <div>已创建<span>1</span>个/还可以创建 <span>x</span>个</div>
                                    <button type="button" class="btn tab-button">
                                        <i class="layui-icon">&#xe654;</i> 创建组
                                    </button>
                                </div>
                                <div class="SJT-right">
                                    <button type="button" class="btn">
                                        <i class="iconfont">&#xe637;</i> 导出大屏
                                    </button>
                                    <button type="button" class="btn">
                                        <i class="iconfont" style="font-size: 0.3rem">&#xe6e0;</i> 导入大屏
                                    </button>
                                    <div class="SJT-ss">
                                        <input type="text" class="suos" placeholder="请输入关键字">
                                        <i class="iconfont ic">&#xe618;</i>
                                    </div>

                                </div>
                            </div>
                            <div class="SJ-bottom">
                                <ul class="SJB-ul">
                                    <li class="SJB_li">
                                        <div class="icon">
                                            <i class="iconfont">&#xe602;</i>
                                        </div>
                                        <p class="cuj">创建大屏</p>
                                    </li>
                                    <li class="SJB_li">
                                        <div class="SJBL-top"></div>
                                        <div class="SJBL-bottom">
                                            <div class="SJBL_left">
                                                <div class="enjoy">名称</div>
                                                <span>2020.8.4</span>
                                                <span>14:58</span>
                                            </div>
                                            <div class="SJBL_right">
                                                <input type="checkbox" name="check-1" value="4" class="lcs_check"
                                                       autocomplete="off"/>
                                                <p>未发布</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="SJ-top">
                                <div class="SJT-left">
                                    <div>已创建<span>1</span>个/还可以创建 <span>x</span>个</div>
                                    <button type="button" class="btn">
                                        <i class="layui-icon">&#xe654;</i> 创建组
                                    </button>
                                </div>
                                <div class="SJT-right">
                                    <button type="button" class="btn">
                                        <i class="iconfont">&#xe637;</i> 导出大屏
                                    </button>
                                    <button type="button" class="btn">
                                        <i class="iconfont" style="font-size: 0.3rem">&#xe6e0;</i> 导入大屏
                                    </button>
                                    <div class="SJT-ss">
                                        <input type="text" class="suos" placeholder="请输入关键字">
                                        <i class="iconfont ic">&#xe618;</i>
                                    </div>

                                </div>
                            </div>
                            <div class="SJ-bottom">
                                <ul class="SJB-ul">
                                    <li class="SJB_li">
                                        <div class="icon">
                                            <i class="iconfont">&#xe602;</i>
                                        </div>
                                        <p class="cuj">创建大屏</p>
                                    </li>
                                    <li class="SJB_li">
                                        <div class="SJBL-top"></div>
                                        <div class="SJBL-bottom">
                                            <div class="SJBL_left">
                                                <div class="enjoy">名称</div>
                                                <span>2020.8.4</span>
                                                <span>14:58</span>
                                            </div>
                                            <div class="SJBL_right">
                                                <input type="checkbox" name="check-1" value="4" class="lcs_check"
                                                       autocomplete="off"/>
                                                <p>未发布</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-tab layui-tab-brief lTop" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">数据库</li>
                        <li>第三方接口</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="SJ-top">
                                <div class="SJT-left">
                                    <div>全部数据库<span>0</span>个</div>

                                </div>
                                <div class="SJT-right">
                                    <button type="button" class="sj-button layui-btn layui-btn-radius layui-btn-primary">
                                        <i class="layui-icon">&#xe654;</i> 新建数据源
                                    </button>
                                    <div class="SJT-ss">
                                        <input type="text" class="suos" placeholder="请输入关键字">
                                        <i class="iconfont ic">&#xe618;</i>
                                    </div>

                                </div>
                            </div>
                            <div class="Sj-num">暂无数据</div>
                        </div>
                        <di class="layui-tab-item">
                            <div class="SJ-top">
                                <div class="SJT-left">
                                    <div>全部第三方接口<span>0</span>个</div>

                                </div>
                                <div class="SJT-right">
                                    <button type="button" class="layui-btn layui-btn-radius layui-btn-primary">
                                        <i class="layui-icon">&#xe654;</i> 新建组
                                    </button>
                                    <div class="SJT-ss">
                                        <input type="text" class="suos" placeholder="请输入关键字">
                                        <i class="iconfont ic">&#xe618;</i>
                                    </div>

                                </div>
                            </div>
                            <div class="Sj-num">暂无数据</div>
                        </di>

                    </div>
                </div>
                <div class="sj-num">
                    <div class="sj-top">
                        <i class="iconfont">&#xe6cc;</i>
                        <span>新增数据源</span>
                    </div>
                    <ul class="sj-bottom">
                        <li>
                            <div class="sjleft sjs1">
                                <img src="images/book.png" alt="">
                            </div>
                            <p>ORACLE</p>
                        </li>
                        <li>
                            <div class="sjleft sjs2">
                                <img src="images/book.png" alt="">
                            </div>
                            <p>PostgreSQL</p>

                        </li>
                        <li class="sj-li" onmouseover="SJmove()" onmouseout="SJout()">
                            <div class="sjleft sjs3">
                                <img src="images/book.png" alt="">
                            </div>
                            <p>MySQL</p>
                            <div class="sj-fu">
                                <i class="iconfont" onclick="shownum()">&#xe678;</i>
                            </div>
                        </li>
                        <li>
                            <div class="sjleft sjs4">
                                <img src="images/book.png" alt="">
                            </div>
                            <p>MariaDB</p>

                        </li>
                        <li>
                            <div class="sjleft sjs5"><img src="images/book.png" alt=""></div>
                            <p>SQLServer</p>
                        </li>
                    </ul>

                </div>
            </div>


        </div>
    </div>
    <div class="tab">
        <div class="tab-content">
            <div class="tab-title">
                <span>新建文件夹</span>
                <i class="iconfont" onclick="Hide()">&#xe714;</i>
            </div>
            <div class="tab-cont">
                <span>名称</span>
                <input type="text" value="">
            </div>
            <div class="tab-bottom">
                <button type="button" class="btn-primary">确定</button>
                <button type="button" class="btn" onclick="Hide()">取消</button>
            </div>
        </div>
    </div>
    <div class="sj-Num">
        <div class="sjN-conten">
            <div class="sjNc-top">
                <span>新增MySQL数据</span>
                <i class="iconfont" onclick="hidenum()">&#xe714;</i>
            </div>
            <div class="sjNc-cont">
                <div class="sjNc-input">
                    <span>数据库名称:</span>
                    <input type="text" placeholder="请输入数据源名称">
                </div>
                <div class="sjNc-input">
                    <span>数据库地址:</span>
                    <input type="text" placeholder="请输入数据库地址">
                </div>
                <div class="sjNc-input">
                    <span>数据库端口:</span>
                    <input type="text" placeholder="请输入数据库端口">
                </div>
                <div class="sjNc-input">
                    <span>数据库/ODBC:</span>
                    <input type="text" placeholder="请输入数据库/ODBC">
                </div>
                <div class="sjNc-input">
                    <span>数据库用户名:</span>
                    <input type="text" placeholder="请输入数据库用户名">
                </div>
                <div class="sjNc-input">
                    <span>数据库密码:</span>
                    <input type="text" placeholder="请输入数据库密码">
                </div>
                <a href="">测试连接</a>
                <p>小提示：请设置您的数据库允许我们的服务器IP：101.37.90.165连接。</p>
            </div>
            <div class="tab-bottom">
                <button type="button" class="btn-primary">确定</button>
                <button type="button" class="btn" onclick="hidenum()">取消</button>
            </div>
        </div>
    </div>
    <!--    <div class="layui-footer">-->
    <!--        &lt;!&ndash; 底部固定区域 &ndash;&gt;-->
    <!--        © layui.com - 底部固定区域-->
    <!--    </div>-->
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/layui.js"></script>
<script src="js/element.js"></script>
<script src="js/lc_switch.js"></script>

<!--<script src="js/login.js"></script>-->

<script>
    // 大屏自适应
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // docEl.style.fontSize = 100 * (1280 / 3840) + 'px';
                docEl.style.fontSize = 100 * (clientWidth / 3200) + 'px';
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    // 新建数据库
    function shownum(){
        $('.sj-Num').css('display','block');
    }
    function hidenum(){
        $('.sj-Num').css('display','none');

    }
    // 新建组
    $('.tab-button').click(function () {
        $('.tab').show();
    })
    function Hide() {
        $('.tab').hide();
    }
    // 新建数据源
    $('.sj-button').click(function (){
        $('.sj-num').css('display','block');
        $('.lTop').css('display','none');
    })
    $('.sj-top .iconfont').click(function (){
        $('.sj-num').hide();
        $('.lTop').show();
    })


    // 鼠标移入移除事件
    function SJmove(){
        $('.sj-li').find('.sj-fu').show();
        $('.sj-li').find('.sj-fu').css('transition','all 1s ease');
    }
    function SJout(){
        $('.sj-li').find('.sj-fu').hide();

    }
    // 返回
    var i = 0;
    $('.layui-logo').click(function () {
        window.history.go(-1);
    })
    // 侧栏显示隐藏切换
    $('.look').click(function () {
        if (i == 0) {
            $('.layui-body').css({
                'left': '53px',
                'z-index': '1000',
                'transition': ' all 0.3s ease'
            })
            $('.work-look1').css({'visibility': 'visible'})
            i = 1;
        } else {
            $('.layui-body').css({'left': '200px', 'transition': ' all 0.3s ease'})
            $('.work-look1').css({'visibility': 'hidden'})
            i = 0;
        }

    })
    // 滑块切换
    $('input').lc_switch();
    $('body').delegate('.lcs_check', 'lcs-statuschange', function () {
        var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
        console.log('field changed status: ' + status);
    });
	
	
	$(function () {
	    // var cont = $('#container').html();
		
		var baseCtx = "http://localhost/web/dataLoad";
		$.ajax({
			url: baseCtx+"/showBaseData",
			type: "post",
			cache: false,
			async: false,
			data: {
				userId:1,
				// name:"大屏",
			},
			dataType: "json",
			success: function(data){
				console.log(data);
				// SJB-ul	父目录class
				// $.each(eval(data['data']),function(index,element){}
				var content = data.data;		        
				//拼接字符串
				var str = '';
				console.log(content);
				// console.log(content.length);
				/* for(var i=0;i<content.length;i++){
					if(content[i].pd == 0){
						console.log("该元素是大屏分组"+element[i].name);
						// str += '<li class="SJB_li">'+
						// 		   '<a href="tuceng.html">'+
						// 			   '<div class="SJBL-top"></div>'+
						// 			   '<div class="SJBL-bottom">'+
						// 				   '<div>'+
						// 					   '<div class="enjoy">'+element[i].name+'</div>'+
						// 					   '<span>'+element[i].createTime+'</span>'+
						// 				   '</div>'+
						// 			   '</div>'+
						// 		   '</a>'+
						// 		'</li>';
							   
					}else{
						console.log("该元素是大屏"+element[i].name);
						// str += '<li class="SJB_li">'+
						// 		   '<div class="SJBL-top"></div>'+
						// 		   '<div class="SJBL-bottom">'+
						// 			   '<div class="SJBL_left">'+
						// 				   '<div class="enjoy">'+element[i].name+'</div>'+'+
						// 				   '<span>'+element[i].createTime+'</span>'+
						// 			   '</div>'+
						// 			   '<div class="SJBL_right">'+
						// 				   '<div class="lcs_wrap"><input type="checkbox" name="check-1" value="4" class="lcs_check" autocomplete="off"><div class="lcs_switch  lcs_off lcs_checkbox_switch"><div class="lcs_cursor"></div><div class="lcs_label lcs_label_on">是</div><div class="lcs_label lcs_label_off">否</div></div></div>'+
						// 				   '<p>未发布</p>'+
						// 			   '</div>'+
						// 		   '</div>'+
						// 		'</li>';
					}
					
					
				}
				 */
				$.each(content,function(index,element){
					console.log("----");
					console.log(element);
					console.log(index);
					console.log(element[index].name);
					
				})	
			},
			error: function(){
				alert("网络错误");
			}
		})
		
	})
</script>
</html>